<template>
  <div class="course-drawer-container">

    <div class="box">
      <Tabs type="card" v-model="currentTab" @on-click="chooseCurrentTab">

        <TabPane label="详情" name="course-details" icon="ios-home-outline">
          <el-form label-position="right" label-width="80px">
            <el-form-item label="课程名称">
              <el-input clearable
                        placeholder="请输入课程名称"
                        type="text"
                        v-model="courseDetailName"
                        maxlength="40"
                        show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="课程简介">
              <Input
                  clearble
                  v-model="courseDetailDesc"
                  placeholder="请输入课程简介"
                  maxlength="200"
                  type="textarea"
                  :autosize="{minRows: 3}"
                  show-word-limit/>
            </el-form-item>

            <el-form-item label="课程视频">
              <el-input clearable
                        placeholder="请输入视频URL"
                        type="text"
                        v-model="videoUrl"
                        maxlength="300"
                        show-word-limit></el-input>
              <div style="margin-top: 10px;display: flex">
                <!--视频-->
                <video :src="videoUrl"
                       v-if="videoUrl!=''"
                       width="300px"
                       height="186px"
                       controls
                       autoplay></video>
                <!--上传-->
                <div v-if="videoUrl==''">

                  <el-upload
                      class="upload-demo"
                      drag
                      :auto-upload="false"
                      :on-change="uploadVideo"
                      action="">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text"><em>点击上传或拖拽上传</em></div>
                  </el-upload>
                </div>

                <div @click="removeVideo" v-if="videoUrl!=''">
                  <IconAli :sty="{width:'36px',height:'36px'}" icon='del-red'></IconAli>
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveCourseDetail()" v-if="saveCourseFlag">保存信息</el-button>
              <el-button v-if="!saveCourseFlag">正在保存</el-button>
            </el-form-item>
          </el-form>
        </TabPane>


        <TabPane label="资料" name="course-doc" icon="ios-list">
          <CourseDoc :courseDetailId="courseDetailId" v-if="currentTab=='course-doc'"></CourseDoc>
        </TabPane>


        <TabPane label="评价" name="course-evaluate" icon="ios-options-outline">

        </TabPane>
      </Tabs>

    </div>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import CourseDoc from "@/components/course/CourseDoc";

export default {
  //组件名称
  name: "CourseDrawer",
  props: ["courseDetailId"],
  //组件注册
  components: {
    IconAli,
    CourseDoc
  },
  //数据驱动
  data() {
    return {
      currentTab: "course-details",          //当前选中tab

      courseDetailName: "",      //课程名称
      courseDetailDesc: "",      //课程简介
      videoUrl: "",              //视频URL

      saveCourseFlag: true,   //保存课程按钮flag
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {
    currentTab: function (newValue, oldValue) {
      if (newValue == "course-details") {
        this.selectCourseDetailByCourseDetailId();
      }
    }
  },
  //方法
  methods: {
    //选中某个 Tab 页
    chooseCurrentTab() {

    },
    removeVideo() {
      this.videoUrl = ""
    },
    //上传视频
    uploadVideo(file, fileList) {
      // this.myFileList = fileList

      //上传
      let formData = new FormData();
      formData.append("file", file.raw);

      this.axios.post(`/file/file/file`, formData)
          .then((data) => {
            let fileId = data.data
            this.axios.get(`/file/fileInfo/file/${data.data}`)
                .then((data) => {
                  this.videoUrl = data.data.url;
                })
          })
      return false;
    },
    //保存信息
    saveCourseDetail() {
      this.saveCourseFlag = false

      let data = {
        courseDetailId: this.courseDetailId,
        courseDetailName: this.courseDetailName,
        courseDetailsDesc: this.courseDetailsDesc,
        videoUrl: this.videoUrl,
      }
      this.axios.put(`/course/course-detail/${this.courseDetailId}`, data)
          .then((data) => {
            this.selectCourseDetailByCourseDetailId()
            this.$Message.success('课程信息更新成功!');
          })
    },
    //根据课程id查询详细信息
    selectCourseDetailByCourseDetailId() {
      this.axios.get(`/course/course-detail/${this.courseDetailId}`)
          .then((data) => {
            this.courseDetailName = data.data.courseDetailName
            this.courseDetailDesc = data.data.courseDetailsDesc
            this.videoUrl = data.data.videoUrl
          })
    },
  },
  //钩子函数
  mounted() {
    this.selectCourseDetailByCourseDetailId();
  }
}
</script>

<style lang="less" scoped>
.course-doc-container {

}
</style>